---
title: "Introduction"
description: "Start building your eCommerce solution with our flexible open source eCommerce platform."
mode: "custom"
---

export const HeroCard = ({ filename, title, description, href }) => {
  return (
    <a className="group cursor-pointer pb-8" href={href}>
      <img
        src={`https://spreecommerce.org/docs/images/hero/${filename}.png`}
        className="block dark:hidden pointer-events-none group-hover:scale-105 transition-all duration-100"
      />
      <img
        src={`https://spreecommerce.org/docs/images/hero/${filename}.png`}
        className="pointer-events-none group-hover:scale-105 transition-all duration-100 hidden dark:block"
      />
      <h3 className="mt-5 text-gray-900 dark:text-zinc-50 font-medium">
        {title}
      </h3>
      <span className="mt-1.5">{description}</span>
    </a>
  );
};

<div className="relative">
  <div className="relative z-10 px-4 py-16 max-w-3xl mx-auto">
    <h1 className="block text-4xl font-medium text-center text-gray-900 dark:text-zinc-50 tracking-tight">
      Spree Commerce Documentation
    </h1>

    <div className="max-w-xl mx-auto px-4 mt-4 text-lg text-center text-gray-500 dark:text-zinc-500">
      Start building your eCommerce solution with our flexible open source eCommerce platform.
    </div>

    <div className="px-6 lg:px-0 mt-12 grid sm:grid-cols-2 gap-x-6 gap-y-4">
      <HeroCard filename="dev" title="Developer Docs" description="Setup your Spree Commerce in minutes and start developing" href="/developer/getting-started" />

      <HeroCard
        filename="api"
        title="API Reference"
        description="Explore the Spree Commerce API reference"
        href="/api-reference"
      />

      <HeroCard
        filename="user"
        title="User Documentation"
        description="Learn how to use Spree Commerce as a store owner or operator"
        href="/user"
      />

      <HeroCard
        filename="integrations"
        title="Integrations"
        description="Integrate Spree Commerce with your favorite tools and services"
        href="/integrations"
      />
    </div>
  </div>
</div>